<%@ page language="java" contentType="text/html; charset=UTF-8" %>
    <!-- 页首-->
    <%@ include file="/WEB-INF/views/commons/header.jsp" %>

        <!--main wrapper-->
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- 左侧菜单 -->
            <%@ include file="/WEB-INF/views/commons/leftMenu.jsp" %>

                <!-- 正文 -->
                <aside class="right-side">
                    <!-- 正文 头-->
                    <section class="content-header">
                        <h1>
                        产品管理
                    </h1>
                        <ol class="breadcrumb">
                            <li><a href="${ctx}/main"><i class="fa fa-home"></i> 首页</a>
                            </li>
                            <li class="active">产品管理</li>
                        </ol>
                    </section>

                    <!-- 内容-->
                    <section class="content">
                        <div class="box box-info">
                            <div class="box-header">
                                <h4 class="box-title"> 
                            </h4>
                                    
                 
                                    
                                <div class="box-tools pull-right">
                                    <button class="btn btn-success" id="addProduct" rel="#overlay"  ><i class="fa fa-plus-circle"></i> 新增产品</button>
                                </div>

                            </div>



                            
                                    <!-- /.box-header -->
                                    <div class="box-body table-responsive">
                                        <table id="productList" class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th>简码</th>
                                                    <th>名称</th>
                                                    <th>价格</th>
                                                    <th>累计销售数</th>
                                                    <th>累计销售金额</th>
                                                    <th>最近7日销售数</th>
                                                    <th>最近7日销售金额</th>
                                                    <th>停用启用</th>
                                                    <th>删除</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                               <c:forEach var="product" items="${productList}"> 
                                                   <tr>
                                                       <td>${product.code}</td>
                                                       <td>${product.name}</td>
                                                       <td>${product.price} 元</td>
                                                       <td>${product.saleCountsTotal} </td>
                                                       <td>${product.saleAmountsTotal} 元</td>
                                                       <td>${product.saleCountsLast} </td>
                                                       <td>${product.saleAmountsLast} 元</td>
                                                       <td>
                                                           <input type="checkbox" class="switch status-switch"   data-off-color="danger" data-on-color="success" ${product.status == 1?"checked":"" }  data-id="${product.id}" /> 
                                                        </td>
                                                        <td><a  onclick="delProduct(this,${product.id})"><i class="fa fa-times"/></a></td>
                                                   </tr>
                                               
                                               </c:forEach>
                                               
                                            

                                            </tbody>
                                           
                                        </table>
                                    </div>
                   
                            </div>
                        </div>
        </div>

        </section>
        <!-- 内容结束 -->
        </aside>
        <!-- 内容结束 -->
        </div>
     
                           
            
      

        <!-- 页尾-->
        <%@ include file="/WEB-INF/views/commons/end.jsp" %>
            
        <script>
             $(function() {
               var products =  $('#productList').dataTable({"oLanguage": {"sUrl": "${res}/lib/datatables/jquery.dataTables.cn.txt"}});

               $('#addProduct').overlyDailog({
                     title:'添加产品',
                     url:'${ctx}/product/add',
                     size:4,
                     berforeClose:function(is_ok,f){
                        if(is_ok){
                          
                            $.ajax({
                                url:'${ctx}/product/add',
                                data:f,
                                success:function(product){
                                    products.fnAddData([
                                        product.code,
                                        product.name,
                                        product.price +'元',
                                        product.saleCountsTotal,
                                        product.saleAmountsTotal +'元',
                                        product.saleCountsLast,
                                        product.saleAmountsLast +'元',
                                        ' <input type="checkbox" class="switch"   data-off-color="danger" data-on-color="success" '+['','checked'][product.status]+' data-id="'+product.id+'"  />',
                                        ' <a  onclick="delProduct(this),'+product.id+'"><i class="fa fa-times"/></a>'
                                        
                                    ]);
                                    products.fnDraw();
                                    $("input.switch[type='checkbox']").bootstrapSwitch({handleWidth:'40px',labelWidth:'5px'});
                                }
                              });
                            
                        }
                     }
                });
                 
                 
                window.delProduct = function(el,id){
              
                    $.ajax({
                        url:'${ctx}/product/del/'+id,
                        success:function(product){
                            products.fnDeleteRow($(el));
                            products.fnDraw();
                        }
                      });
                    
                }
                
                
                 
                $('.status-switch').on('switchChange.bootstrapSwitch', function(event, state) {
                    var url, id=$(this).attr('data-id');
                    if(state)
                        url = '${ctx}/product/startUsing/'+id;
                    else
                        url = '${ctx}/product/stopUsing/'+id;
                    
                    $.ajax({url:url, success:function(product){}});
                 
                });

                  
            });
        
        </script>